<template>
  <div class="account-detail-wrap">
    <div class="account-date-box">
      <div class="date-con">
        <img src="../../../images/left_month.png" class="pic1" @click="preMonth" onclick="return false"/>
        <datetime format="YYYY-MM" v-model="accountMonth" class="date-time" :end-date="endDate"
                  @on-confirm="confirmMonth"></datetime>
        <img src="../../../images/right_month.png" class="pic2" @click="nextMonth" onclick="return false"/>
      </div>
    </div>

    <div class="account-result-data">
      <div class="account-total-box">
        <span class="total-in">总收入：{{inMoney}}元</span>
        <span class="total-out">总提现：{{outMoney}}元</span>
      </div>

      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        class="van-bill-item"
      >
        <div class="account-money-item-box">

          <div class="account-money-item-list" v-for="(bill,index) in billList" :key="index" @click="showDetail(bill)">
            <div class="account-money-item-con">
              <div class="account-money-text">
                <span class="money-text" v-if="bill.billType == 1">{{bill.type | changeBillType}}</span>
                <span class="money-text" v-else>提现</span>
                <span class="money-time" v-if="bill.billType == 1">{{bill.time | formatBillTime}}</span>
                <span class="money-time" v-if="bill.billType == 2">{{bill.endTime}}</span>
              </div>

              <div class="account-money-num">
                <span class="money-num" :class="{'money-proxy':bill.billType == 1}">{{bill.money}}元</span>
                <span class="money-status" v-if="bill.billType == 1">已到蓝聘账户</span>
                <span class="money-status" v-else-if="bill.billType == 2">{{bill.status}}</span>
              </div>
            </div>
          </div>

        </div>
      </van-list>
    </div>

    <v-empty :logo="require('../../../images/no_data.png')" title="没有数据记录~"
             v-if="billList.length == 0 && !loading"></v-empty>

    <div class="load-shade-box" v-show="showShade"></div>
  </div>
</template>

<script>
  import dialog from '../../../components/dialog';
  import {Datetime} from 'vux';
  import {formatDate, getNextMonth, getPreMonth, getYearMonth, toDecimal} from "../../../config/util";
  import empty from '../../../components/empty';
  import {queryBillRecord} from "../../../axios/api";

  export default {

    data() {
      return {
        accountMonth: getYearMonth(),
        userMark: "",
        endDate: "",
        billList: [],
        page: 1,
        size: 20,
        loading: false,
        finished: false,
        inMoney: 0,
        outMoney: 0,
        showShade: false
      }
    },
    created() {
      this.endDate = formatDate(new Date(), "yyyy-MM-dd");
      let base64 = require('js-base64').Base64;
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));
    },
    methods: {
      onLoad() {
        if (!this.timer) {// 异步更新数据
          this.timer = setTimeout(() => {
            this.queryAccountDetail(this.accountMonth);
            this.timer = null;
          }, 500)
        }
      },
      preMonth() {//上一月
        this.accountMonth = getPreMonth(this.accountMonth);
        this.initVanList();
      },
      nextMonth() {//下一月
        if (this.accountMonth == getYearMonth()) {
          return;
        }
        this.accountMonth = getNextMonth(this.accountMonth);
        this.initVanList();
      },
      confirmMonth(value) {
        this.accountMonth = value;
        this.initVanList();
      },
      initVanList() {
        this.page = 1;
        this.size = 20;
        this.billList = [];
        this.inMoney = 0;
        this.outMoney = 0;
        this.loading = true;
        this.finished = false;
        if (this.loading) {
          this.onLoad();
        }
      },
      queryAccountDetail(month) {//明细列表
        let params = {
          "sgin": this.userMark,
          "time": month,
          "page": this.page,
          "size": this.size
        };
        this.showShade = true;
        queryBillRecord(params).then((res) => {
          if (res.code == 0) {
            if (res.data != null && res.data.length > 0) {
              this.inMoney = toDecimal(res.data[0].allMoney);//总收入
              this.outMoney = toDecimal(res.data[0].billMoney);//提现支出

              this.billList = this.billList.concat(res.data);
              for (let i = 0, length = this.billList.length; i < length; i++) {

                this.billList[i].money = toDecimal(this.billList[i].money);
                if (this.billList[i].billType == 2) {//1为账单流水 2为提现记录

                  if (this.billList[i].status == 1) {
                    this.billList[i].endTime = formatDate(new Date(this.billList[i].time), 'yyyy-MM-dd hh:mm');
                  } else {
                    this.billList[i].endTime = formatDate(new Date(this.billList[i].set_time), 'yyyy-MM-dd hh:mm');
                  }

                  if (this.billList[i].status == 1 || this.billList[i].status == 2) {//1提现申请2银行接受处理3银行处理成功4银行转账失败
                    this.billList[i].status = "处理中";
                  } else if (this.billList[i].status == 3) {
                    this.billList[i].status = "到账成功";
                  } else if (this.billList[i].status == 4) {
                    this.billList[i].status = "到账失败";
                  }
                }
              }

              this.loading = false;
              this.page++;
            } else {
              this.loading = false;
              if (this.billList.length >= res.data.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(res.msg, "middle");
          }
          this.showShade = false;
        });
      },
      showDetail(bill) {
        if (bill.billType == 1) {
          let stamp = formatDate(new Date(bill.time), 'yyyy-MM-dd hh:mm');
          this.$router.push({
            path: '/billCostDetail',
            query: {type: this.changeProxyType(bill.type), money: bill.money, stamp: stamp}
          });
        } else {
          this.$router.push({path: "/depositDetail", query: {"depositId": bill.id}});
        }
      },
      changeProxyType(type) {
        let temp = "";
        if (type == 0) {
          temp = "其它";
        } else if (type == 1) {
          temp = "门店收入";
        } else if (type == 3) {
          temp = "代理费";
        }
        return temp;
      }
    },
    filters: {
      formatBillTime(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      },
      changeBillType(type) {
        let temp = "";
        if (type == 0) {
          temp = "其它";
        } else if (type == 1) {
          temp = "门店收入";
        } else if (type == 3) {
          temp = "代理费";
        }
        return temp;
      }
    },
    components: {
      Datetime,
      "v-dialog": dialog,
      "v-empty": empty
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .account-detail-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .account-date-box {
      position: fixed;
      top: 0rem;
      z-index: 100;
      .fj(center, center);
      .wh(100%, 1.2rem);
      background: rgba(60, 175, 255, 1);
      .date-con {
        .fj(center, center);
        .pic1 {
          .wh(0.48rem, 0.48rem);
        }
        .date-time {
          padding-right: 0.32rem;
          padding-left: 0.32rem;
          .size-color(0.427rem, rgba(255, 255, 255, 1));
        }
        .date-time /deep/ .weui-cell__ft {
          color: rgba(255, 255, 255, 1)
        }
        .date-time /deep/ .weui-cell__ft .vux-cell-value {
          color: rgba(255, 255, 255, 1)
        }
        .pic2 {
          .wh(0.48rem, 0.48rem);
        }
      }
    }
    .account-total-box {
      position: absolute;
      top: 1.2rem;
      z-index: 100;
      display: flex;
      align-items: center;
      .wh(100%, 0.96rem);
      .size-color(0.347rem, rgba(153, 153, 153, 1));
      .total-in {
        padding-left: 0.32rem;
      }
      .total-out {
        margin-left: auto;
        padding-right: 0.32rem;
      }
    }
    .van-bill-item {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 2.133rem;
      .wh(100%, auto);
      .account-money-item-box {
        .wh(100%, auto);
        .account-money-item-list {
          .wh(100%, auto);
          background: #FFF;
          .account-money-item-con {
            display: flex;
            align-items: center;
            .wh(96.8%, 1.6rem);
            background: #FFF;
            margin-left: 0.32rem;
            border-bottom: 0.027rem solid #f2f2f2;
            .account-money-text {
              display: flex;
              flex-direction: column;
              .money-text {
                padding-bottom: 0.2rem;
                .size-color(0.427rem, rgba(51, 51, 51, 1));
              }
              .money-time {
                .size-color(0.32rem, rgba(153, 153, 153, 1));
              }
            }
            .account-money-num {
              display: flex;
              flex-direction: column;
              align-items: flex-end;
              margin-left: auto;
              margin-right: 0.32rem;
              .money-num {
                padding-bottom: 0.2rem;
                .size-color-weight(0.427rem, rgba(255, 84, 84, 1), 500);
              }
              .money-proxy {
                color: #3CAFFF;
              }
              .money-status {
                .size-color(0.32rem, rgba(153, 153, 153, 1));
              }
            }
          }
        }

      }
    }
    .load-shade-box {
      position: fixed;
      z-index: 1000;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
    }
  }
</style>
